<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="author" content="xmy6364">
    <meta name="description" content="想要成为大佬">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

    <link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.5.0/styles/github-gist.min.css">
    <link rel="stylesheet" href="/assets/lib/css/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/css/layout.css" />
    <script defer src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
    <script defer src="/assets/js/copyCode.js"></script>
    <script defer src="/assets/js/backTop.js"></script>
    <script defer src="/assets/js/tool.js"></script>

    
  <link rel="stylesheet" href="/assets/css/page.css" />
  <link rel="stylesheet" href="/assets/css/sidebar.css" />
  <link rel="stylesheet" href="/assets/css/footer.css" />
  <link rel="stylesheet" href="/assets/css/post.css" />
  <script defer src="/assets/js/backHome.js"></script>
  <script defer src="/assets/js/toc.js"></script>
  <script defer src="/assets/js/copyright.js"></script>


    <title>TypeScript实现设计模式——单例模式</title>
  </head>
  <body>
    <div class="container">
      <aside>
        
  <div class="sidebar">
  <header>梦的博客</header>
  <div class="info">
    <div class="avatar">
      <img src="https://cdn.jsdelivr.net/gh/xmy6364/blog-image/img/pixelartoc_1.png" alt="头像">
    </div>
    <div class="author">xmy6364</div>
    <div class="description">想要成为大佬</div>
    <div class="about">
      <a href="/about">about me.</a>
    </div>
  </div>
  <div class="links">
    <ul>
    
      <li class="links-item">
        <a href="https://github.com/xmy6364" target="_blank">
          <i class="fa fa-github-alt" aria-hidden="true"></i>
        </a>
      </li>
    
      <li class="links-item">
        <a href="tencent://message/?uin=1176281967" target="_blank">
          <i class="fa fa-qq" aria-hidden="true"></i>
        </a>
      </li>
    
    </ul>
  </div>
  <nav>
    <ul>
    
      <li class="nav-item">
        <a href="/archives">
          <span class="nav-item__count">33</span>
          <span class="nav-item__label">归档</span>
        </a>
      </li>
    
      <li class="nav-item">
        <a href="/categories">
          <span class="nav-item__count">2</span>
          <span class="nav-item__label">分类</span>
        </a>
      </li>
    
      <li class="nav-item">
        <a href="/tags">
          <span class="nav-item__count">45</span>
          <span class="nav-item__label">标签</span>
        </a>
      </li>
    
    </ul>
  </nav>
  <div class="catalogue" id="catalogue"></div>
</div>

      </aside>
      <main>
        
  <div class="post">
    <div class="post-front">
      <h1 class="post-front__title">TypeScript实现设计模式——单例模式</h1>
      <div class="post-front__desc">
        
        <p class="post-front__desc-date">
          <i class="fa fa-calendar" aria-hidden="true"></i>
          2020/03/19 21:51:43
        </p>
        
        
        <p class="post-front__desc-category">
          <i class="fa fa-folder-o" aria-hidden="true"></i>
          <a href="/categories/技术">
            技术
          </a>
        </p>
        
          <div class="post-front__desc-tags">
          
          <a href="/tags/typescript">
            <i class="fa fa-tag" aria-hidden="true"></i>
            typescript
          </a>
          
          <a href="/tags/设计模式">
            <i class="fa fa-tag" aria-hidden="true"></i>
            设计模式
          </a>
          
        </div>
      </div>
    </div>
    <div class="post-content">
      <nav id="toc" class="toc"><ol><li><a href="#懒汉单例模式">懒汉单例模式</a></li><li><a href="#饿汉单例模式">饿汉单例模式</a></li></ol></nav><p>最近在学习设计模式，又正好刚上手了typescript，就想要用ts实现一下试试。</p>
<p>单例模式的目的是限制一个类只能被实例化一次，提供一个全局的访问点。单例模式又被分为懒汉单例模式和饿汉单例模式，懒汉单例模式就是在第一次调用时实例化，饿汉单例模式是类加载时就实例化。</p>
<p><strong>核心要点：</strong></p>
<p>把一个静态私有变量确立为唯一的实例，外部通过静态方法访问这个唯一的实例，并把构造函数设为私有。</p>
<h2 id="懒汉单例模式">懒汉单例模式</h2>
<pre class="hljs"><code><button class="copy-btn" type="button" data-clipboard-action="copy" data-clipboard-target="#copy1622199843403">复制</button><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">PeopleSingle</span> </span>{
  <span class="hljs-comment">/**核心 - 一个接收实例的静态成员 */</span>
  <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> people: PeopleSingle;
  <span class="hljs-keyword">private</span> name: <span class="hljs-built_in">string</span>;

  <span class="hljs-comment">/**核心 - 私有构造函数 */</span>
  <span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">name: <span class="hljs-built_in">string</span></span>)</span> {
    <span class="hljs-built_in">this</span>.name = name;
  }

  <span class="hljs-comment">/**核心 - 获取实例 */</span>
  <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> getInstance(): PeopleSingle {
    <span class="hljs-keyword">if</span> (<span class="hljs-built_in">this</span>.people == <span class="hljs-literal">null</span>) {
      <span class="hljs-built_in">this</span>.people = <span class="hljs-keyword">new</span> PeopleSingle(<span class="hljs-string">&#x27;金闪闪&#x27;</span>);
    }
    <span class="hljs-keyword">return</span> PeopleSingle.people;
  }

  <span class="hljs-keyword">public</span> say(): <span class="hljs-built_in">void</span> {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`I&#x27;m <span class="hljs-subst">${<span class="hljs-built_in">this</span>.name}</span>.`</span>);
  }
}
<b class="name">typescript</b></code><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre><textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy1622199843403">class PeopleSingle {
  /**核心 - 一个接收实例的静态成员 */
  private static people: PeopleSingle;
  private name: string;

  /**核心 - 私有构造函数 */
  private constructor(name: string) {
    this.name = name;
  }

  /**核心 - 获取实例 */
  public static getInstance(): PeopleSingle {
    if (this.people == null) {
      this.people = new PeopleSingle('金闪闪');
    }
    return PeopleSingle.people;
  }

  public say(): void {
    console.log(`I'm ${this.name}.`);
  }
}
</textarea>
<p>测试</p>
<pre class="hljs"><code><button class="copy-btn" type="button" data-clipboard-action="copy" data-clipboard-target="#copy1622198578151">复制</button><span class="hljs-keyword">let</span> people = PeopleSingle.getInstance();
people.say();
<b class="name">typescript</b></code><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></pre><textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy1622198578151">let people = PeopleSingle.getInstance();
people.say();
</textarea>
<h2 id="饿汉单例模式">饿汉单例模式</h2>
<pre class="hljs"><code><button class="copy-btn" type="button" data-clipboard-action="copy" data-clipboard-target="#copy1622197106089">复制</button><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">PeopleSingle</span> </span>{
  <span class="hljs-comment">/**核心 - 一个接收实例的静态成员，直接创建好实例 */</span>
  <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> people: PeopleSingle = <span class="hljs-keyword">new</span> PeopleSingle(<span class="hljs-string">&#x27;金闪闪&#x27;</span>);
  <span class="hljs-keyword">private</span> name: <span class="hljs-built_in">string</span>;

  <span class="hljs-comment">/**核心 - 私有构造函数 */</span>
  <span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">name: <span class="hljs-built_in">string</span></span>)</span> {
    <span class="hljs-built_in">this</span>.name = name;
  }

  <span class="hljs-comment">/**核心 - 获取实例 */</span>
  <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> getInstance(): PeopleSingle {
    <span class="hljs-keyword">return</span> PeopleSingle.people;
  }

  <span class="hljs-keyword">public</span> say(): <span class="hljs-built_in">void</span> {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`I&#x27;m <span class="hljs-subst">${<span class="hljs-built_in">this</span>.name}</span>.`</span>);
  }
}
<b class="name">typescript</b></code><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre><textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy1622197106089">class PeopleSingle {
  /**核心 - 一个接收实例的静态成员，直接创建好实例 */
  private static people: PeopleSingle = new PeopleSingle('金闪闪');
  private name: string;

  /**核心 - 私有构造函数 */
  private constructor(name: string) {
    this.name = name;
  }

  /**核心 - 获取实例 */
  public static getInstance(): PeopleSingle {
    return PeopleSingle.people;
  }

  public say(): void {
    console.log(`I'm ${this.name}.`);
  }
}
</textarea>
<p>测试</p>
<pre class="hljs"><code><button class="copy-btn" type="button" data-clipboard-action="copy" data-clipboard-target="#copy1622202396570">复制</button><span class="hljs-keyword">let</span> people = PeopleSingle.getInstance();
people.say();
<b class="name">typescript</b></code><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></pre><textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy1622202396570">let people = PeopleSingle.getInstance();
people.say();
</textarea>
<p>举的例子不是特别好，但是意思是这个意思。</p>

    </div>
    
  </div>

        <footer>
        
  <div class="footer">
  
  <div class="theme">
    博客主题为 <a href="https://github.com/xmy6364/CoinRailgun">CoinRailgun</a> 默认主题
  </div>
  <div class="copyright">
    <span>© 2019-2021 xmy6364.</span>
    <span>Powered by <a href="https://github.com/xmy6364/CoinRailgun">CoinRailgun</a></span>
  </div>
</div>

        </footer>
      </main>
    </div>
  </body>
</html>
